<template>
    <!--这里是分类的首页-->
    <div class="viewport">
        <searchContainer />
        <div class="tab-content viewport">
        <div class="tab-nav">
            <ul>
                <li class="active">
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
                <li>
                    <span>数码产品</span>
                </li>
            </ul>
        </div>
        <div class="tab-menu">
          <ul>
            
            <li class="active tab-li">
              
              <div class="tab-list">
                <h2>手机</h2>
                <ul>
                  
                  <li>
                    <router-link to="/searchResult">
                      <div class="tab-img">
                        <img src="http://img.66fenqi.cn/category/20181206/QVA1AZyUVICfNaH.jpg">
                      </div>
                      <p class="tab-desc">苹果</p>
                    </router-link>
                  </li>
                  
                  <li>
                    <router-link to="/searchResult">
                      <div class="tab-img">
                        <img src="http://img.66fenqi.cn/category/20181206/NPLvtnUdSQoGbVZ.jpg">
                      </div>
                      <p class="tab-desc">华为</p>
                    </router-link>
                  </li>
                  
                  <li>
                    <router-link to="/searchResult">
                      <div class="tab-img">
                        <img src="http://img.66fenqi.cn/category/20181206/uvVBe13y90p20AX.jpg">
                      </div>
                      <p class="tab-desc">vivo</p>
                    </router-link>
                  </li>
                  
                  <li>
                    <router-link to="/searchResult">
                      <div class="tab-img">
                        <img src="http://img.66fenqi.cn/category/20181206/W9NNb5vm7lH98BA.jpg">
                      </div>
                      <p class="tab-desc">oppo</p>
                    </router-link>
                  </li>
                </ul>
              </div>
              
            </li>
            
          </ul>
        </div>
        <div class="tab-clone bottom hidden">
          <span></span>
        </div>
      </div>
    </div>
</template>
<script>
import SearchContainer          from "@/components/web/public/SearchContainer"
export default {
  name: 'navTab',
  data () {
    return {
       
    }
  },
  mounted(){
    document.documentElement.scrollTop = 0;
  },
  components:{
    searchContainer:SearchContainer
  }
}
</script>
<style scoped>
.tab-content {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: .88rem;
    bottom: 50px;
    background-color: #F2F2F2;
    border-top:1px solid #f2f2f2;
}
.tab-nav {
    float: left;
    width: 1.76rem;
    height: 100%;
    text-align: center;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.tab-nav li.active {
    background: #fff;
}
.tab-menu {
    height: 100%;
    overflow: auto;
    padding: .16rem .32rem;
    background: #fff;
}
.tab-menu .tab-li {
    display: none;
}
.tab-menu .tab-li.active {
    display: block;
}
.tab-menu .tab-list {
    margin-bottom: .32rem;
}
.tab-menu .tab-list h2 {
    font-size: .3rem;
    color: #424242;
    padding: .16rem 0;
}
.tab-menu .tab-list ul {
    padding-top: .32rem;
    background: #fff;
    border-radius: .08rem;
    overflow: hidden;
}
.tab-menu .tab-list ul li {
    float: left;
    margin-bottom: .32rem;
    width: 33.33333%;
    text-align: center;
}
.tab-nav li, .tab-content .tab-clone {
    height: 1.12rem;
    line-height: 1.12rem;
    font-size: .3rem;
    color: #424242;
    background: #f2f2f2;
    padding-right: 0.2rem;
}
.tab-nav li span {
    display: inline-block;
    width: 100%;
    height: .4rem;
    line-height: .4rem;
    border-left: 4px solid transparent;
    font-size: 0.26rem;
}
.tab-nav li.active span {
    color: #FFAB00;
    border-left-color: #FFAB00;
}
.tab-menu .tab-list ul li .tab-img {
    margin: 0 auto;
    width: 1.2rem;
    height: 1.2rem;
}
.tab-menu .tab-list ul li .tab-img img {
    width: 100%;
    height: 100%;
}
.tab-menu .tab-list ul li .tab-desc {
    padding-top: .16rem;
    font-size: .26rem;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
